<template>
  <div>
    <div class="top">
      <div><Detailstop></Detailstop></div>
    </div>
    <div class="bottom">
      <Detailsbottom></Detailsbottom>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Detailstop from "../components/Detailstop.vue";
import Detailsbottom from "../components/Detailsbottom.vue";
import Footer from "../components/Footer.vue";
export default {
  name: "ProductDetails",
  data() {
    return {
      item: [],
      product: {},
      options1: [
        {
          value: "选项1",
          label: "黑色",
        },
        {
          value: "选项2",
          label: "白色",
        },
        {
          value: "选项3",
          label: "蓝色",
        },
        {
          value: "选项4",
          label: "深蓝色",
        },
      ],
      value1: "",
      options2: [
        {
          value: "选项1",
          label: "S",
        },
        {
          value: "选项2",
          label: "M",
        },
        {
          value: "选项3",
          label: "L",
        },
        {
          value: "选项4",
          label: "XL",
        },
        {
          value: "选项5",
          label: "2XL",
        },
      ],
      value2: "",
    };
  },
  components: {
    Detailsbottom,
    Detailstop,
    Footer
  },
  created() {
    this.item = this.$route.query.id;
    this.$axios
      .get(`/api/product/getProductById?goods_id=${this.item}`)
      .then((res) => {
        this.product = res.data.data;
        this.$bus.$emit("results", this.product);
      })
  },
};
</script>

<style >
#nav {
  width: 90%;
  height: 70px;
  background-color: #fff;
  position: fixed;
  bottom: 35px;
  margin-right: 45px;
  margin-left: 45px;
  display: none;
  border-radius: 10px;
  color: #555;
  box-shadow: 0 12px 14px 0 rgb(0 0 0 / 20%);
}
#nav .el-input__inner {
  width: 100%;
}
#nav .el-select .el-input.is-focus .el-input__inner {
  border-color: #000;
}
#nav .el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #000;
  outline: 0;
}
#nav .el-input {
  width: 100%;
}
#nav .el-select {
  display: inline-block;
  position: relative;
  width: 8%;
}
#nav i {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 20px;
}

#nav span {
  line-height: 70px;
}
#nav button {
  width: 200px;
  height: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background-color: #000;
  border: #000 solid 1px;
  position: absolute;
  right: 0;
  border-radius: 0 10px 10px 0;
}
</style>